import { Input, Label, Flex } from '@aws-amplify/ui-react';

import { InputDemo } from './demo';
import {
  DefaultRequiredInputExample,
  DefaultInputExample,
  RequiredInputExample,
  InputEventHandlersExample,
  InputSizeExample,
  InputStatesExample,
  InputStylePropsExample,
  InputThemeExample,
  InputValidationErrorExample,
  InputVariationExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<InputDemo />

## Usage

Import the `Input` component and styles and connect a `Label` for accessibility/usability.

<Example>
  <DefaultInputExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultInputExample.tsx

    ```

</ExampleCode>
</Example>

### Sizes

`Input` sizes are designed to match styling of other field components such as Buttons. There are three sizes: small, (default), and large.

<Example>
  <InputSizeExample />
  <ExampleCode>
    ```jsx file=./examples/InputSizeExample.tsx

    ```

  </ExampleCode>
</Example>

### Variations

There are two variation styles available: default and `quiet`.

<Example>
  <InputVariationExample />
  <ExampleCode>
  ```jsx file=./examples/InputVariationExample.tsx
  ```
  </ExampleCode>

</Example>

### States

The available Input states include `isDisabled` and `isReadOnly`. A disabled field will be not be focusable, is not mutable, and will not be submitted with form data. A readonly field cannot be edited by the user.

<Example>
  <InputStatesExample />
  <ExampleCode>
    ```jsx file=./examples/InputStatesExample.tsx

    ```

  </ExampleCode>
</Example>

### Required fields

Use the `isRequired` prop to specify a required field.

<Example>
  <DefaultRequiredInputExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultRequiredInputExample.tsx

    ```

  </ExampleCode>
</Example>

There is no default styling for required fields. Customize the `label` to instruct the form user of the required field.

<Example>
  <RequiredInputExample />
  <ExampleCode>
    ```jsx file=./examples/RequiredInputExample.tsx

    ```

  </ExampleCode>
</Example>

### Validation error styling

Use the `hasError` prop to mark an Input as having a validation error.

<Example>
  <InputValidationErrorExample />
  <ExampleCode>
    ```jsx file=./examples/InputValidationErrorExample.tsx

    ```

  </ExampleCode>
</Example>

### Event handlers

Input provides several event handlers: `onSelect`, `onInput`, `onChange`, `onCopy`, `onPaste`, and `onCut`. Open the console to interact with the demo below. 

<Example>
  <InputEventHandlersExample />
  <ExampleCode>
    ```jsx file=./examples/InputEventHandlersExample.tsx

    ```

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="Input" link="input" element="<input>" />

### Input Types
Input primitive comes styled for text input only (type `text`, `date`, `number`, etc). For text component combining Input and Label, see [TextField](textfield). For other input types, see [TextAreaField](textareafield), [CheckBoxField](checkboxfield), and [SelectField](selectfield).
  <Example>
    <Flex direction="column" gap="small">
      <Label htmlFor="departing">Enter departing date ✈️</Label>
      <Input
        id="departing"
        type="date"
      />
    </Flex>
    <ExampleCode>

    ```jsx
    <Flex direction="column" gap="small">
      <Label htmlFor="departing">Enter departing date ✈️</Label>
      <Input
        id="departing"
        type="date"
      />
    </Flex>
    ```

    </ExampleCode>

  </Example>
  <Example>
    <Flex direction="column" gap="small">
      <Label htmlFor="quantity">Enter quantity needed: </Label>
      <Input
        id="quantity"
        type="number"
      />
    </Flex>
    <ExampleCode>

    ```jsx
    <Flex direction="column" gap="small">
      <Label htmlFor="quantity">Enter quantity needed: </Label>
      <Input
        id="quantity"
        type="number"
      />
    </Flex>
    ```

    </ExampleCode>

  </Example>

## Styling

<ThemeExample component="Input">
  <Example>
    <InputThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/InputThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Global styling

To override styling on all Input primitives, you can set the Amplify CSS variables with the built-in `.amplify-input` class.

<Example>
  <Input
    className="globally-styled-input"
  />
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-input {
      --amplify-components-input-border-color: rebeccapurple;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Input, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <Flex direction="column" gap="small">
    <Label htmlFor="custom-input">Square field</Label>
    <Input className="custom-input-class" id="custom-input" />
  </Flex>
  <ExampleCode>
    ```css
    /* styles.css */
    .custom-input-class.amplify-input {
      border-radius: 0;
    }
    ```
  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <InputStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/InputStylePropsExample.tsx

    ```

  </ExampleCode>
</Example>
